import 'dart:convert';
import 'dart:io';

import 'package:find_friend/common/alert_tool.dart';
import 'package:find_friend/common/popmenue.dart';
import 'package:find_friend/const/const.dart';
import 'package:find_friend/network/network.dart';
import 'package:find_friend/pages/guide/sysmodel.dart';
import 'package:find_friend/pages/login&register/model/shared_user_info.dart';
import 'package:flutter/material.dart';
import 'package:image_pickers/Media.dart';
import 'package:image_pickers/image_pickers.dart';
import 'package:shared_preferences/shared_preferences.dart';

class EmojiWidget extends StatefulWidget {

  final Function(String emoji) onTapEmoji;
  final Function() onTapDelete;
  final Function(String faceurl) onTapFace;

  const EmojiWidget({Key key, this.onTapEmoji, this.onTapDelete, this.onTapFace}) : super(key: key);

  @override
  _EmojiWidgetState createState() => _EmojiWidgetState();
}

class _EmojiWidgetState extends State<EmojiWidget> {
  PageController _pageController = PageController();
  int selectIdx = 0;
  List<LaunchModel> faceboom = [];
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    
    // _initFace();
    _initFromUser();
  }

  _initFace() {
    SharedPreferences.getInstance().then((value){
      final str = value.getString(KEY_SYS_Data);
      SysModel model = SysModel.fromJson(json.decode(str));
      faceboom.addAll(model.chatface);
      if(mounted) setState(() { });
    });
  }

  _initFromUser() {
    SharedUserInfo.instance().then((value) {
      if(value.sticker != null) {
        List<LaunchModel> temp = [];
        faceboom.clear();
        value.sticker.forEach((element) { 
          temp.add(LaunchModel(url: element.url, id: element.id));
        });
        setState(() {
          faceboom.addAll(temp);
        });
      }
    });
  }

  void _addFaceImage() async {
    //从照片选择
    List<Media> _listImagePaths = await ImagePickers.pickerPaths(
      galleryMode: GalleryMode.image,
      selectCount: 9,
      showCamera: false,
      // compressSize: 500,
    );
    List<File> _temp = [];
    _listImagePaths.forEach((e) { _temp.add(File(e.path)); });
    AlertTool.showLoadingDialog(context);
    Networktool.uploads(API.sticker, _temp, (data){
      if(data != null) {
        SharedUserInfo.saveData(data);
        _initFromUser();
      }
    },
    finaly: () => Navigator.pop(context));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              itemCount: 2,
              onPageChanged: (idx){
                setState(() {
                  selectIdx = idx;
                });
              },
              itemBuilder: (context, index){
                if(index == 0) {
                  return EmojiBorad(onTapEmoji: widget.onTapEmoji,);
                } else {
                  return MineFaceBorad(list: faceboom, onTapFace: widget.onTapFace, addFaceImage: _addFaceImage,);
                }
              }
            )
          ),
          EmojiTabbar(selectIdx: selectIdx, onTap: (idx){
            if(idx < 2) {
              _pageController.animateToPage(idx, duration: Duration(milliseconds: 300), curve: Curves.easeInOutCirc);
              setState(() {
                selectIdx = idx;
              });
            } else {
              if(widget.onTapDelete != null) widget.onTapDelete();
            }
          },)
        ],
      ),
    );
  }
}


class EmojiTabbar extends StatelessWidget {
  final int selectIdx;
  final Function(int idx) onTap;

  const EmojiTabbar({Key key, this.selectIdx, this.onTap}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container(
            height: 45,
            child: Row(
              children: [
                GestureDetector(
                  onTap: (){
                    if(onTap != null) onTap(0);
                  },
                  child: SizedBox(
                    width: 45,
                    height: 25,
                    child: Image.asset("assets/biaoqing.png", color: selectIdx == 0 ? APP_main_color : null,),
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    if(onTap != null) onTap(1);
                  },
                  child: SizedBox(
                    width: 45,
                    height: 25,
                    child: Icon(Icons.favorite, color: selectIdx == 1 ? APP_main_color : const Color(0xff999999),),
                  ),
                ),
                Spacer(),
                GestureDetector(
                  onTap: (){
                    if(onTap != null) onTap(2);
                  },
                  child: SizedBox(
                    width: 45,
                    height: 25,
                    child: Image.asset("assets/shanchu222.png", color: APP_main_color,),
                  ),
                ),
              ],
            ),
          );
  }
}

class MineFaceBorad extends StatefulWidget {
  
  final List<LaunchModel> list;
  final Function(String faceurl) onTapFace;
  final Function() addFaceImage;

  const MineFaceBorad({Key key, this.list, this.onTapFace, this.addFaceImage}) : super(key: key);

  @override
  _MineFaceBoradState createState() => _MineFaceBoradState();
}

class _MineFaceBoradState extends State<MineFaceBorad> {

  bool isdelete = false;

  _delet(LaunchModel model) {
    Networktool.request(API.delfile, params: {"id":model.id, "userinfo": true}, method: NETWORKHTTPMethod.DELETE, success: (data){
      if(data != null){
        SharedUserInfo.saveData(data);
        setState(() {
          widget.list.remove(model);
        });
      }
    },
    fail: (msg) => AlertTool.showToast(msg),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
            shrinkWrap: true,
            itemCount: widget.list.length + 1,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 5,
              mainAxisSpacing: 15,
              crossAxisSpacing: 19,
            ),
            itemBuilder: (context, index) {
              if(index == 0) {
                return InkWell(
                  onTap: widget.addFaceImage,
                  child: Image.asset("assets/tianjia.png"),
                );
              }
              return WPopupMenu(
                menuWidth: 60,
                backgroundColor: Colors.white,
                onValueChanged: (int value) {
                  _delet(widget.list[index]);
                },
                pressType: PressType.longPress,
                actions: ["删除"],
                child: InkWell(
                  onTap: (){
                    if(widget.onTapFace != null) widget.onTapFace(widget.list[index].url);
                  },
                  child: PhysicalModel(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(10),
                  clipBehavior: Clip.antiAlias,
                  child: Image.network(widget.list[index - 1].url)
                  ),
                ),
              );
            },
          );
  }
}

class EmojiBorad extends StatelessWidget {
  final Function(String emoji) onTapEmoji;
  List<String> list = [
  '😀',
  '😃',
  '😄',
  '😁',
  '😆',
  '😅',
  '🤣',
  '😂',
  '🙂',
  '🙃',
  '😉',
  '😊',
  '😇',
  '🥰',
  '😍',
  '🤩',
  '😘',
  '😗',
  '☺',
  '😚',
  '😙',
  '😋',
  '😛',
  '😜',
  '🤪',
  '😝',
  '🤑',
  '🤗',
  '🤭',
  '🤫',
  '🤔',
  '🤐',
  '🤨',
  '😐',
  '😑',
  '😶',
  '😏',
  '😒',
  '🙄',
  '😬',
  '🤥',
  '😌',
  '😔',
  '😪',
  '🤤',
  '😴',
  '😷',
  '🤒',
  '🤕',
  '🤢',
  '🤮',
  '🤧',
  '🥵',
  '🥶',
  '🥴',
  '😵',
  '🤯',
  '🤠',
  '🥳',
  '😎',
  '🤓',
  '🧐',
  '😕',
  '😟',
  '🙁',
  '☹\ufe0f',
  '\ud83d\udea3',
  '😯',
  '😲',
  '😳',
  '🥺',
  '😦',
  '😧',
  '😨',
  '😰',
  '😥',
  '😢',
  '😭',
  '😱',
  '😖',
  '😣',
  '😞',
  '😓',
  '😩',
  '😫',
  '😤',
  '😡',
  '😠',
  '🤬',
  '😈',
  '👿',
  '💀',
  '☠',
  '💩',
  '🤡',
  '👹',
  '👺',
  '👻',
  '👽',
  '👾',
  '🤖',
  '😺',
  '😸',
  '😹',
  '😻',
  '😼',
  '😽',
  '🙀',
  '😿',
  '😾',
  '💋',
  '👋',
  '🤚',
  '🖐',
  '✋',
  '🖖',
  '👌',
  '✌',
  '🤞',
  '🤟',
  '🤘',
  '🤙',
  '👈',
  '👉',
  '👆',
  '🖕',
  '👇',
  '☝',
  '👍',
  '👎',
  '✊',
  '👊',
  '🤛',
  '🤜',
  '👏',
  '🙌',
  '👐',
  '🤲',
  '🤝',
  '🙏',
  '✍',
  '💅',
  '🤳',
  '💪',
  '🦵',
  '🦶',
  '👂',
  '👃',
  '🧠',
  '🦷',
  '🦴',
  '👀',
  '👁',
  '👅',
  '👄',
  '👶',
  '🧒',
  '👦',
  '👧',
  '🧑',
  '👨',
  '🧔',
  '👱\u200d♂️',
  '👨\u200d🦰',
  '👨\u200d🦱',
  '👨\u200d🦳',
  '👨\u200d🦲',
  '👩',
  '👱\u200d♀️',
  '👩\u200d🦰',
  '👩\u200d🦱',
  '👩\u200d🦳',
  '👩\u200d🦲',
  '🧓',
  '👴',
  '👵',
  '🙍\u200d♂️',
  '🙍\u200d♀️',
  '🙎\u200d♂️',
  '🙎\u200d♀️',
  '🙅\u200d♂️',
  '🙅\u200d♀️',
  '🙆\u200d♂️',
  '🙆\u200d♀️',
  '💁\u200d♂️',
  '💁\u200d♀️',
  '🙋\u200d♂️',
  '🙋\u200d♀️',
  '🙇\u200d♂️',
  '🙇\u200d♀️',
  '🤦\u200d♂️',
  '🤦\u200d♀️',
  '🤷\u200d♂️',
  '🤷\u200d♀️',
  '👨\u200d⚕️',
  '👩\u200d⚕️',
  '👨\u200d🎓',
  '👩\u200d🎓',
  '👨\u200d🏫',
  '👩\u200d🏫',
  '👨\u200d⚖️',
  '👩\u200d⚖️',
  '👨\u200d🌾',
  '👩\u200d🌾',
  '👨\u200d🍳',
  '👩\u200d🍳',
  '👨\u200d🔧',
  '👩\u200d🔧',
  '👨\u200d🏭',
  '👩\u200d🏭',
  '👨\u200d💼',
  '👩\u200d💼',
  '👨\u200d🔬',
  '👩\u200d🔬',
  '👨\u200d💻',
  '👩\u200d💻',
  '👨\u200d🎤',
  '👩\u200d🎤',
  '👨\u200d🎨',
  '👩\u200d🎨',
  '👨\u200d✈️',
  '👩\u200d✈️',
  '👨\u200d🚀',
  '👩\u200d🚀',
  '👨\u200d🚒',
  '👩\u200d🚒',
  '👮\u200d♂️',
  '👮\u200d♀️',
  '🕵️\u200d♂️',
  '🕵️\u200d♀️',
  '💂\u200d♂️',
  '💂\u200d♀️',
  '👷\u200d♂️',
  '👷\u200d♀️',
  '🤴',
  '👸',
  '👳\u200d♂️',
  '👳\u200d♀️',
  '👲',
  '🧕',
  '🤵',
  '👰',
  '🤰',
  '🤱',
  '👼',
  '🎅',
  '🤶',
  '🦸\u200d♂️',
  '🦸\u200d♀️',
  '🦹\u200d♂️',
  '🦹\u200d♀️',
  '🧙\u200d♂️',
  '🧙\u200d♀️',
  '🧚\u200d♂️',
  '🧚\u200d♀️',
  '🧛\u200d♂️',
  '🧛\u200d♀️',
  '🧜\u200d♂️',
  '🧜\u200d♀️',
  '🧝\u200d♂️',
  '🧝\u200d♀️',
  '🧞\u200d♂️',
  '🧞\u200d♀️',
  '🧟\u200d♂️',
  '🧟\u200d♀️',
  '💆\u200d♂️',
  '💆\u200d♀️',
  '💇\u200d♂️',
  '💇\u200d♀️',
  '🚶\u200d♂️',
  '🚶\u200d♀️',
  '🏃\u200d♂️',
  '🏃\u200d♀️',
  '💃',
  '🕺',
  '🕴',
  '👯\u200d♂️',
  '👯\u200d♀️',
  '🧖\u200d♂️',
  '🧖\u200d♀️',
  '🧘',
  '👭',
  '👫',
  '👬',
  '💏',
  '👨\u200d❤️\u200d💋\u200d👨',
  '👩\u200d❤️\u200d💋\u200d👩',
  '💑',
  '👨\u200d❤️\u200d👨',
  '👩\u200d❤️\u200d👩',
  '👪',
  '👨\u200d👩\u200d👦',
  '👨\u200d👩\u200d👧',
  '👨\u200d👩\u200d👧\u200d👦',
  '👨\u200d👩\u200d👦\u200d👦',
  '👨\u200d👩\u200d👧\u200d👧',
  '👨\u200d👨\u200d👦',
  '👨\u200d👨\u200d👧',
  '👨\u200d👨\u200d👧\u200d👦',
  '👨\u200d👨\u200d👦\u200d👦',
  '👨\u200d👨\u200d👧\u200d👧',
  '👩\u200d👩\u200d👦',
  '👩\u200d👩\u200d👧',
  '👩\u200d👩\u200d👧\u200d👦',
  '👩\u200d👩\u200d👦\u200d👦',
  '👩\u200d👩\u200d👧\u200d👧',
  '👨\u200d👦',
  '👨\u200d👦\u200d👦',
  '👨\u200d👧',
  '👨\u200d👧\u200d👦',
  '👨\u200d👧\u200d👧',
  '👩\u200d👦',
  '👩\u200d👦\u200d👦',
  '👩\u200d👧',
  '👩\u200d👧\u200d👦',
  '👩\u200d👧\u200d👧',
  '🗣',
  '👤',
  '👥',
  '👣',
  '🧳',
  '🌂',
  '☂',
  '🧵',
  '🧶',
  '👓',
  '🕶',
  '🥽',
  '🥼',
  '👔',
  '👕',
  '👖',
  '🧣',
  '🧤',
  '🧥',
  '🧦',
  '👗',
  '👘',
  '👙',
  '👚',
  '👛',
  '👜',
  '👝',
  '🎒',
  '👞',
  '👟',
  '🥾',
  '🥿',
  '👠',
  '👡',
  '👢',
  '👑',
  '👒',
  '🎩',
  '🎓',
  '🧢',
  '⛑',
  '💄',
  '💍',
  '💼'
];

  EmojiBorad({Key key, this.onTapEmoji}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xfff9f8fd),
      child: GridView(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 8
              ),
              children: list.map((e){
                return FlatButton(
                  onPressed: (){
                    if(onTapEmoji != null) onTapEmoji(e);
                  },
                  child: Text(e, style: instanceTextStyle(20, Colors.white),),
                );
              }).toList(),
            ),
    );
  }
}
